<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="visible"
               v-loading="loading"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="50%">
      <el-form :model="productForm"
               :rules="productRules"
               ref="productRef"
               label-width="100px">
        <el-form-item label="产品包名称"
                      prop="productName">
          <el-input placeholder="请输入产品包名称"
                    v-model="productForm.productName"
                    class="w-300"
                    :disabled="isDisabled">
          </el-input>
        </el-form-item>
        <el-form-item label="价格"
                      prop="price">
          <el-input-number placeholder="请输入价格"
                           v-model="productForm.price"
                           :min="0"
                           :precision="2"
                           type="number"
                           :controls="false"
                           :disabled="isDisabled"
                           class="w-300">
          </el-input-number>
        </el-form-item>

        <el-row>
          <el-col :span="3"
                  class="read-name"><span>产品包内容</span></el-col>
          <el-col :span="20"
                  class="read-wrap">
            <el-form-item label="30s心电报告解读"
                          label-width="180px">
              <el-input-number placeholder="请输入30s心电报告解读次数"
                               v-model="productForm.fastEcgReadCount"
                               :min="0"
                               :precision="0"
                               :controls="false"
                               type="number"
                               :disabled="isDisabled"
                               class="w-300"></el-input-number>
            </el-form-item>
            <el-form-item label="动态心电24小时报告解读"
                          label-width="180px">
              <el-input-number placeholder="请输入动态心电24小时报告解读次数"
                               v-model="productForm.activeEcg24ReadCount"
                               :min="0"
                               :precision="0"
                               :controls="false"
                               type="number"
                               :disabled="isDisabled"
                               class="w-300"></el-input-number>
            </el-form-item>
            <el-form-item label="动态心电48小时报告解读"
                          label-width="180px">
              <el-input-number placeholder="请输入动态心电48小时报告解读次数"
                               v-model="productForm.activeEcg48ReadCount"
                               :min="0"
                               :precision="0"
                               :controls="false"
                               type="number"
                               :disabled="isDisabled"
                               class="w-300"></el-input-number>
            </el-form-item>
            <el-form-item label="动态心电72小时报告解读"
                          label-width="180px">
              <el-input-number placeholder="请输入动态心电72小时报告解读次数"
                               v-model="productForm.activeEcg72ReadCount"
                               :min="0"
                               :precision="0"
                               :controls="false"
                               type="number"
                               :disabled="isDisabled"
                               class="w-300"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="产品包图片"
                      prop="productImage"
                      class="mt-20">
          <el-upload class="avatar-uploader"
                     :action="uploadImgUrl"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
                     :disabled="isDisabled">
            <img v-if="productForm.productImage"
                 :src="productForm.productImage"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="modalClose"
                   v-if="isDetail"
                   type="primary">返 回</el-button>
        <el-button @click="modalClose"
                   v-else>取 消</el-button>
        <el-button type="primary"
                   v-if="!isDetail"
                   @click="submitForm(isSubmitType)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      productObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      },
      getList: {
        type: Function,
        default: null
      },
      isDetail: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        loading: false,
        uploadImgUrl: this.api.file.upload,
        isDisabled: false,
        title: '新增',
        isSubmitType: 'add',
        productForm: {
          productName: '',
          price: undefined,
          productImage: '',
          fastEcgReadCount: undefined, // 去除计数器默认为0,因此定义为undefined
          activeEcg24ReadCount: undefined,
          activeEcg48ReadCount: undefined,
          activeEcg72ReadCount: undefined
        },
        productRules: {
          productName: [
            { required: true, message: '请输入产品包名称', trigger: 'blur' },
            { max: 15, message: '长度在 15 个字符内', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          productImage: [
            { required: true, message: '请上传产品包图片', trigger: 'change' }
          ]
        },
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      submitForm (isSubmitType) {
        // 新增保存
        if (isSubmitType === 'add') {
          let flag = true
          this.$refs.productRef.validate(async (valid) => {
            if (valid) {
              let { fastEcgReadCount, activeEcg24ReadCount, activeEcg48ReadCount, activeEcg72ReadCount } = { ...this.productForm }
              let readCount = {
                fastEcgReadCount: fastEcgReadCount,
                activeEcg24ReadCount: activeEcg24ReadCount,
                activeEcg48ReadCount: activeEcg48ReadCount,
                activeEcg72ReadCount: activeEcg72ReadCount
              }
              for (let val in readCount) {
                if (readCount[val] == undefined) {
                  flag = true
                } else {
                  flag = false
                  break
                }
              }
              if (!flag) {
                const { data: res } = await this.post(this.api.ECG.addProduct, this.productForm)
                if (res.code === '200') {
                  this.$message.success('新增成功!')
                  this.modalClose()
                  // this.$parent.getList() // 可调佣父组件方法
                  this.getList() // props 父组件传过来的方法
                } else {
                  this.$message.error(res.message)
                }
              } else {
                this.$message.warning('请至少输入一项报告解读次数')
              }
            }
          })
        }
        // 编辑保存
        if (isSubmitType === 'modify') {
          this.$refs.productRef.validate(async (valid) => {
            if (valid) {
              const { data: result } = await this.post(this.api.ECG.modifyProduct, this.productForm)
              if (result.code === '200') {
                this.$message.success('保存成功!')
                this.modalClose()
                this.$parent.getList() // 可调佣父组件方法
              } else {
                this.$message.error(result.message)
              }
            }
          })
        }
      },
      // 上传成功
      handleAvatarSuccess (response, file, fileList) {
        if (response.code === '200') {
          // 状态码为200时则上传成功
          this.productForm.productImage = response.object[0]
          this.$message.success('上传成功');
        } else {
          // 状态码不是200时上传失败 从列表中删除
          fileList.splice(fileList.indexOf(file), 1);
          this.$message.error(response.message);
        }
      },
      // 上传前的方法
      beforeAvatarUpload (file) {
        let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']
        const isType = types.includes(file.type)
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isType) {
          this.$message.error('上传图片必须是JPG/JPEG/GIF/PNG/BMP 格式!');
          return isType
        }
        if (!isLt10M) {
          this.$message.error('上传图片大小不能超过 10MB!');
          return isLt10M
        }
      },
      // 详情    
      async getDetailProduct () {
        const { data: res } = await this.post(this.api.ECG.getDetailProduct, {
          id: this.productObj.id
        })
        if (res.code === '200') {
          let resData = res.object
          this.productForm = resData
          this.productForm.productName = resData.name
          this.productForm.productImage = resData.imageUrl
        } else {
          this.$message.error(res.message)
        }
      }
    },
    created () {
      if (this.productObj) {
        this.title = '编 辑'
        this.isSubmitType = 'modify'
        this.getDetailProduct()
        if (this.isDetail) {
          this.isDisabled = true
          this.title = '详 情'
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .w-300 {
    width: 300px;
  }
  .read-name {
    width: 100px;
  }
  .read-wrap {
    padding-top: 20px;
    border: 1px solid #dcdfe6;
  }
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>